<template>
  <div class="searchForm content" v-if="formItems.length">
    <el-form ref="form" :model="modelValue">
      <template v-for="(item, index) in formItems">
        <el-form-item v-if="item.type == 'Input'" :label="item.label" :key="index">
          <el-input class="searc-form-item" v-model="modelValue[item.field]" :placeholder="item.placeholder"
            @input="$forceUpdate()" clearable />
        </el-form-item>
        <el-form-item v-if="item.type == 'Select'" :label="item.label" :key="index">
          <el-select filterable clearable class="searc-form-item" v-model="modelValue[item.field]" @input="$forceUpdate()"
            @change="() => { SelectChange(modelValue) }" :placeholder="item.placeholder" clearable>
            <el-option v-for="(option, index) in item.options" :key="index" :label="option[item.optionProps.label]"
              :value="option[item.optionProps.value]"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type == 'DatePicker'" :label="item.label" :key="index">
          <el-date-picker class="searc-form-item" v-model="modelValue[item.field]" @input="$forceUpdate()"
            value-format="yyyy-MM-dd HH:mm:ss" align="right" type="date" :placeholder="item.placeholder"
            :picker-options="item.pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="item.type == 'DateRangePicker'" :label="item.label" :key="index">
          <el-date-picker class="searc-form-item" v-model="modelValue[item.field]" @input="$forceUpdate()"
            value-format="yyyy-MM-dd" align="right" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </template>
    </el-form>
    <div class="footer pagination" v-if="showButton">
      <slot name="searchButton">
        <el-button icon="el-icon-circle-check" plain type="primary" @click="search">查询</el-button>
      </slot>
    </div>
  </div>
</template>

<script>
import { mymixin } from "@/utils/mixin";
export default {
  props: {
    showButton: {
      type: Boolean,
      default: true,
    },
    formItems: {
      type: Array,
      required: true,
    },
  },
  data () {
    return {
      modelValue: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  watch: {
    formItems: {
      handler () {
        console.log(this.modelValue, "modelValue");
        this.formItems.forEach((item) => {
          let defaultValue = this.modelValue[item.field] ? this.modelValue[item.field] : item.defaultValue
          // this.modelValue[item.field] = item.defaultValue ? item.defaultValue : "";
          this.$set(this.modelValue, [item.field], defaultValue ? defaultValue : "")
        });
        console.log(this.modelValue, "modelValue");
      },
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
      immediate: true, //刷新加载  立马触发一次handler
    }
  },
  mixins: [mymixin],
  methods: {
    search () {
      this.$emit("getSearchData", this.modelValue);
    },
    SelectChange (value) {
      this.$emit('SelectChange', value)
    }
  },
};
</script>

<style scoped lang="scss">
.searchForm {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

::v-deep .el-form {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 110px);

}

::v-deep .el-form-item {
  display: flex;
  padding-right: 20px;
  font-weight: 200 !important;
}

::v-deep .el-form-item__label {
  width: 120px;
  box-sizing: border-box;
}

::v-deep .el-form-item__content {
  width: calc(100% - 120px);

  .searc-form-item {
    width: 100%;
  }
}
</style>
